<template>
	<view class="">
		<u-navbar bgColor="#fff" :placeholder="true" :fixed="true" @leftClick="$back" title="我的评价" titleStyle="{'color': '#000'}">
			
		</u-navbar>
		<view class="showcase_item">
			<view class="total-comments">
				<view class="title">
					您的评价
				</view>
				<view class="display-flex">
					<view class="left-box">
						<view class="display-flex">
							<text class="total-num">{{info.rank || 0}}</text>
							<view class="total-star">
								<u-rate :count="count"  :value="info.rank" active-color="#45C4B0" :disabled="true"></u-rate>
								<view class="total-font">
									共{{total || 0}}条评价
								</view>
							</view>
						</view>
						<view class="display-flex sort-type">
							<text>效率 {{info.efficiency_l || 0}}</text>
							<text>内容 {{info.cont_l || 0}}</text>
							<text>文笔 {{info.writings_l || 0}}</text>
						</view>
					</view>
					
					<view class="right-box">
						<view class="display-flex mb12">
							<text>满意</text>
							<u-line-progress activeColor="#45C4B0"  inactiveColor="rgba(216, 216, 216, 0.3)" :percentage="info.rank_l"  :showText="false"></u-line-progress>
							<text class="fonttxt">{{info.rank_l || 0}}%</text>
						</view>
						<view class="display-flex mb12">
							<text>一般</text>
							<u-line-progress activeColor="#45C4B0" inactiveColor="rgba(216, 216, 216, 0.3)" :percentage="info.rank_ll" :showText="false"></u-line-progress>
							<text class="fonttxt">{{info.rank_ll || 0}}%</text>
						</view>
						<view class="display-flex">
							<text>不满</text>
							<u-line-progress activeColor="#45C4B0" inactiveColor="rgba(216, 216, 216, 0.3)" :percentage="info.rank_lll" :showText="false"></u-line-progress>
							<text class="fonttxt">{{info.rank_lll || 0}}%</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="empytView" v-if="!list.length">
			<image :src="'/images/kong.png' | formatImgUrl" mode="widthFix" />
			<!-- <view>- 空列表 -</view> -->
		</view>
		
		<view v-for="(item,index) in list" class="showcase_item item_warp" >
			<view class="showcase_head user_head"> 
				<image v-if="type==1"  @tap.stop="$go('/pages/my/my?id=' + item.uid)" :src="item.pic | formatImgUrl" mode="aspectFill" class="pic"></image>
				<image v-else :src="item.pic | formatImgUrl" mode="aspectFill" class="pic"></image>
				<view class="user_box">
					<view class="top">
						<text class="tit">{{item.username}}</text>
						<view class="tip suc" v-if="item.rank==5">
							很满意
						</view>
						<view class="tip suc" v-if="item.rank==4">
							满意
						</view>
						<view class="tip zhong" v-if="item.rank==3">
							一般
						</view>
						<view class="tip" v-if="item.rank==2">
							不满
						</view>
						<view class="tip" v-if="item.rank==1">
							很不满
						</view>
					</view>
					<view class="user_info">
						{{item.create_time}}
					</view>
				</view>
				<image :src="'/images/bao.png' | formatImgUrl" class="jubox" mode="" @tap.stop="show=true,aid=item.id"></image>
			</view>
			<view class="showcase_content" @tap.stop="$go('/showcase/showcase/evaluateinfo?id=' + item.oid)">
				{{item.eval_row?item.eval_row:"该用户什么都没有填写"}}
			</view>
			<view class="jiebox" @tap.stop="$go('/pages/my/connect?id='+item.oid)">
				<view class="left">
					<view class="ltop">
						<image :src="'/images/je.png' | formatImgUrl" class="lpic" mode="aspectFit"></image>
						<view class="ltitle oneline">
							{{item.c_title}}
						</view>
					</view>
					<view class="ltxt">
						{{item.c_desc}}<text> | 共{{item.num}}单</text><text> | 共{{item.num}}{{item.c_word_count}}</text>
					</view>
				</view>
				<view class="ytxt">
					<text>本单共计</text>{{item.price}}<text style="color: #45C4B0;">币</text>
				</view>
			</view>
		</view>
		
		<u-popup :show="show" @close="close">
			<view class="mask" v-if="type==1">
				<view class="matop" @click="goToreport">
					<!-- <image :src="'/images/jing.png'  | formatImgUrl" class="mapic" mode=""></image> -->
					<view class="matxt">
						申诉
					</view>
					<image :src="'/images/rarr.png'  | formatImgUrl" class="mapic" mode=""></image>
				</view>
				<view class="qubox" @click="show = false">
					取消
				</view>
			</view>
			<view class="mask" v-else >
				<view class="matop" @click="jubao()">
					<!-- <image :src="'/images/jing.png'  | formatImgUrl" class="mapic" mode=""></image> -->
					<view class="matxt">
						举报
					</view>
					<image :src="'/images/rarr.png'  | formatImgUrl" class="mapic" mode=""></image>
				</view>
				<view class="qubox" @click="show = false">
					取消
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				page: 1,
				list: {},
				show:false,
				count: 5,
				value: 4.8,
				type: 1,
				info: {},
				userInfo: this.$db.get('userInfo'),
				total: 0,
				aid: ''
			}
		},
		onLoad() {
			this.page = 1;
			this.list = [];
			this.get_list()
			
			this.getDatas()
		},
		onReachBottom() {
			this.get_list();
		},
		onPullDownRefresh() {
			setTimeout(function() {
					uni.stopPullDownRefresh(); //停止当前页面下拉刷新	
			}, 800);
				this.page = 1;
				this.list = [];
				this.get_list()
		},
		methods:{
			goToreport() {
				this.show = false
				
				uni.navigateTo({
					url: '/pages/find/reportEva?id=' + this.aid + '&type=' + this.type + '&newtype=0'
				})
			},
			getDatas(){
				this.$api.default.request('user/get_comlist_dea', {
					id: this.userInfo.uid
				}).then((res) => {
					if (res.code) {
						this.info = res.data
						this.value = Math.floor(res.data.comprehensive)
					}
				})
			},
			get_list(){
				var _this = this;
				this.$api.default.request('user/getCom', {
					page: this.page
				}).then((res) => {
					if (res.code) {
						_this.total = res.data.total || 0
						 if(res.data.data){
							if (_this.list != null) {
								// this.articleList.concat(res.data.data);
								_this.list = _this.list.concat(res.data.data);
								// res.data.data.forEach((item) => {
								// 	this.logList.push(item)
								// })
							} else {
								_this.list =	res.data.data;
							}
							_this.page++; // 页数加一，加载下一页数据
						}
					}
				})
			},
			close(){
				this.show = false
			},
			jubao(){
				if(this.info.type!==1){
					uni.navigateTo({
					 url: '/pages/find/reportEva?id='+this.info.id+ '&type='+this.info.type + '&newtype=4'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	
	
	page{
		background: rgba(242, 245, 242, 1);
	}
	.showcase_item {
		padding: 30rpx 30rpx;
		background: #fff;
		box-sizing: border-box;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		
		.user_head {
			.pic {
				width: 80rpx !important;
				height: 80rpx !important;
				border-radius: 50%;
				margin-right: 20rpx;
			}
	
			.top {
				display: flex;
				align-items: center;
				.suc{
					background: rgba(69, 196, 176, 0.15);
					color: #45C4B0;;
				}
				.zhong{
					background: rgba(255, 170, 0, 0.15);
					color: #ffaa00;
				}
			}
	
			.user_info {
				font-size: 24rpx;
				font-weight: normal;
				color: #999999;
				margin-top: 5rpx;
			}
		}
	
		.showcase_head {
			display: flex;
			position: relative;
			align-items: center;
	
			image {
				width: 32rpx;
				height: 32rpx;
			
				margin-right: 8rpx;
			}
	
			.tit {
				font-size: 28rpx;
				font-weight: bold;
				color: #3D3D3D;
			}
			.tits{
				width: 90%;
			}
	
			.tip {
				font-size: 20rpx;
				font-weight: normal;
				color: #999999;
				padding: 2rpx 8rpx;
				background: rgba(153, 153, 153, 0.15);
				border-radius: 8rpx;
				margin-left: 16rpx;
			}
	
			.jubox {
				position: absolute;
				top: 6rpx;
				right: 0rpx;
				width: 32rpx;
				height: 32rpx;
				// border: 1px dashed #eeeeee;
			}
		}
	
		.showcase_content {
			font-size: 26rpx;
			font-weight: normal;
			color: #3d3d3d;
			margin: 18rpx 0 30rpx;
			
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			word-break: break-all;
		}
	
		.showcase_wrap {
			margin-top: 28rpx;
			display: grid;
			grid-gap: 28rpx 24rpx;
			grid-template-columns: repeat(auto-fill, 300rpx);
			padding-bottom: 20rpx;
	
			.wrap_item {
				display: flex;
				align-items: center;
				font-size: 20rpx;
				color: #999999;
	
				image {
					width: 24rpx;
					height: 24rpx;
					object-fit: cover;
					margin-right: 4rpx;
				}
			}
		}
	}
	
	.mask {
		background: #F2F5F2;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		overflow: hidden;
	
		.matop {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 40rpx 68rpx;
			margin-bottom: 20rpx;
			border-bottom: 1px solid rgba(153, 153, 153, 0.1);
			background-color: #ffffff;
	
			.mapic {
				width: 40rpx;
				height: 40rpx;
				flex-shrink: 0;
			}
	
			.matxt {
				flex-grow: 1;
				font-size: 28rpx;
				padding: 0 16rpx;
				font-weight: bold;
				letter-spacing: 0em;
				color: #3D3D3D;
			}
		}
	
		.qubox {
			line-height: 120rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: bold;
			letter-spacing: 0em;
			color: #3D3D3D;
			height: 120rpx;
			opacity: 1;
			background: #FFFFFF;
		}
	}

	.total-comments{
		.title{
			font-family: Source Han Sans CN;
			font-size: 14px;
			font-weight: bold;
			color: #3D3D3D;
		}
		
		.total-num{
			font-family: Source Han Sans CN;
			font-size: 40px;
			font-weight: bold;
			font-feature-settings: "kern" on;
			color: #45C4B0;
			margin-right: 10rpx;
		}
		
		.total-font{
			font-family: Source Han Sans CN;
			font-size: 12px;
			color: #999999;
			padding-left: 10rpx;
		}
		
		.sort-type{
			justify-content: space-between;
			font-family: Source Han Sans CN;
			font-size: 12px;
			color: #3D3D3D;
		}
		
		.right-box{
			padding-top: 20rpx;
			margin-left: 50rpx;
			font-family: Source Han Sans CN;
			font-size: 12px;
			color: #3D3D3D;
			
			.fonttxt{
				width: 60rpx;
			}
		}
		
		.mb12{
			margin-bottom: 12rpx;
		}
	}
	
	/deep/.u-line-progress{
		margin: 0 8rpx;
		width: 200rpx;
	}
	
	.jiebox {
		padding: 20rpx;
		border-radius: 8rpx;
		opacity: 1;
		background: #F8F8F8;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
	
		.left {
			flex-shrink: 0;
	
			.ltop {
				display: flex;
				align-items: center;
				padding-bottom: 18rpx;
	
				.lpic {
					width: 32rpx;
					height: 32rpx;
					flex-shrink: 0;
				}
	
				.ltitle {
					padding-left: 6rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #3D3D3D;
				}
			}
	
			.ltxt {
				font-size: 20rpx;
				color: #3D3D3D;
	
				text {
					padding-left: 10rpx;
					font-size: 20rpx;
					color: #999999;
				}
			}
		}
	
		.ytxt {
			font-size: 36rpx;
			font-weight: bold;
			color: #45C4B0;
	
			text {
				font-size: 20rpx;
				color: #999999;
				padding: 0 8rpx;
				font-weight: normal;
			}
		}
	}
</style>